
*{
    padding: 0;
    margin: 0;
}
body{
    font-family: Arial,"Microsoft YaHei",sans-serif;
}
html,body{
    height: 100%;
    overflow: hidden;
}
#container,.sections,.section{
    height: 100%;
    position: relative;
}
#section0,
#section1,
#section2,
#section3{
    background-color: #000;
    background-size: cover;
    background-position: 50% 50%;
}
#section0{
    background-image:url(../images/wu.jpg);
    color: #000000;
    text-shadow:7px 7px 7px #333;
}

#section1{
    color: #fff;
    text-shadow:1px 1px 1px #333;
    background-image:url(../images/axin.jpeg);
}
#section2{
    color: #fff;
    text-shadow:1px 1px 1px #666;
    background-image:url(../images/guaishou.jpg);
}
#section3{
    color: #008283;
    background-image:url(../images/3.jpg);
    text-shadow:1px 1px 1px #fff;
}
.index_title {
    width:100%;
    height: 190px;
    text-align: center;
    line-height: 130px;
}
.index_intro{
    width: 90%;
    height: auto;
    color: white;
    font-size: 30px;
    margin: 300px 100px 0px 60px;
    white-space:normal;
}

.xin_name{
    font-size: 80px;
    font-family: 微软雅黑;
    font-weight: bold;
    color: black;
    margin: 0px 0px 0px 200px;
    padding-top: 90px;
    text-shadow: 4px 4px 4px #333333;
}
.gs_name {
    font-size: 80px;
    font-family: 微软雅黑;
    font-weight: bold;
    color: white;
    margin: 0px 200px 0px 0px;
    padding-top: 90px;
    text-shadow: 4px 4px 4px #ffffff;
    float: right;
    width: 1000px;
    text-align: right;
}
.xin_intro{
    width: 800px;
    height: 200px;
    margin-top: 60px;
    margin-left: 100px;
    font-size: 30px;
    color: #333333;
}

.gs_intro{
    width: 800px;
    height: 200px;
    margin-top: 60px;
    margin-right: 100px;
    font-size: 30px;
    color: #ffffff;
    float: right;
    text-align: right;
}
.xin_info {
    font-size: 18px;
    width: 200px;
    height: 220px;
    text-align: left;
    border: 4px #008283 solid;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
    padding: 10px 10px 10px 30px;
    background-image: url("../images/bg.jpg");
    color: black;
    margin-left: 150px;
    margin-top: 50px;
}

.gs_info {
    font-size: 18px;
    width: 200px;
    height: 220px;
    text-align: left;
    border: 4px #008283 solid;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
    padding: 10px 10px 10px 30px;
    background-image: url("../images/bg.jpg");
    color: black;
    margin-left: 500px;
    margin-top: 50px;

}
.cardspan{
    font-size: 18px;
    color: #404d5b;
    font-size: 32px;
    font-weight: bold;
    font-family: 黑体;
    text-align: center;
    margin: 0px;

}

.cardli {
    list-style: none;
    line-height: 18px;
    width: 200px;
}

.cardli2 {
    list-style: none;
    line-height: 34px;
    width: 200px;
}
#section3 p{
    color: #00A3AF;
}

/*照片墙开始*/
.main img { position:absolute;
    padding:5px 5px 9px;
    background:#FFFFFF;
    width:280px;
    -webkit-transition:1s;
    -moz-transition:1s;
    transition:1s;}

.main img:hover {

    padding:5px 5px 9px;
    background:#FFFFFF;
    border:1px solid #000033;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    transform: scale(2);
    -webkit-box-shadow:10px 10px 15px black;
    -moz-box-shadow:10px 10px 15px black;
    box-shadow:10px 10px 15px black;
    z-index:2;
}

.pic1 { left:80px;
    top:80px;
    transform:rotate(25deg) scale(1);
    -webkit-transform:rotate(25deg) scale(1);
    -moz-transform:rotate(25deg) scale(1);}

.pic2 { left:70px;
    top:500px;
    transform:rotate(-25deg) scale(1);
    -webkit-transform:rotate(-25deg) scale(1);
    -moz-transform:rotate(-25deg) scale(1);}

.pic3 { left:650px;
    top:100px;
    transform:rotate(-10deg) scale(1);
    -webkit-transform:rotate(-10deg) scale(1);
    -moz-transform:rotate(-10deg) scale(1);}

.pic4 { left:360px;
    top:100px;
    transform:rotate(15deg) scale(1);
    -webkit-transform:rotate(15deg) scale(1);
    -moz-transform:rotate(15deg) scale(1);}

.pic5 { left:980px;
    top:80px;
    transform:rotate(-15deg) scale(1);
    -webkit-transform:rotate(-15deg) scale(1);
    -moz-transform:rotate(-15deg) scale(1);}

.pic6 { left:70px;
    top:250px;
    transform:rotate(5deg) scale(1);
    -webkit-transform:rotate(5deg) scale(1);
    -moz-transform:rotate(5deg) scale(1);}

.pic7 { left:370px;
    top:300px;
    transform:rotate(-5deg) scale(1);
    -webkit-transform:rotate(-5deg) scale(1);
    -moz-transform:rotate(-5deg) scale(1);}

.pic8 { left:700px;
    top:270px;
    transform:rotate(-17deg) scale(1);
    -webkit-transform:rotate(-17deg) scale(1);
    -moz-transform:rotate(-17deg) scale(1);}

.pic9 { left:980px;
    top:460px;
    transform:rotate(25deg) scale(1);
    -webkit-transform:rotate(25deg) scale(1);
    -moz-transform:rotate(25deg) scale(1);}

.pic10 { left:1150px;
    top:460px;
    transform:rotate(-5deg) scale(1);
    -webkit-transform:rotate(-5deg) scale(1);
    -moz-transform:rotate(-5deg) scale(1);}


.pic11 { left:700px;
    top:490px;
    transform:rotate(17deg) scale(1);
    -webkit-transform:rotate(17deg) scale(1);
    -moz-transform:rotate(17deg) scale(1);}

/*照片墙结束*/
.left{
    float: left;
}
h1{
    font-size: 6em;
    font-weight: bold;
}
p{
    font-size: 2em;
    margin:0.5em 0 2em 0;
}
.intro{
    position: absolute;
    top: 40%;
    width: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}


.pages{
    position:fixed;
    list-style: none;
}
.vertical.pages{
    right: 10px;
    top: 50%;
}
.horizontal.pages{
    left: 50%;
    bottom: 10px;
}
.pages li{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    margin: 10px 5px;
    cursor: pointer; /* 改变光标（手）*/
}
.horizontal.pages li{
    display: inline-block;
    vertical-align: middle;
}
.pages li.active{
    width: 14px;
    height: 14px;
    border: 2px solid #FFFE00;
    background: none;
    margin-left: 0;
}
#section0 .index_title{
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-animation: sectitle0 1s ease-in-out 100ms forwards;
    animation: sectitle0 1s ease-in-out 100ms forwards;
}
#section0 .index_intro{
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-animation: sec0 1s ease-in-out 100ms forwards;
    animation: sec0 1s ease-in-out 100ms forwards;
}
.xin_info {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-animation: card 1s ease-in-out 100ms forwards;
    animation: card 1s ease-in-out 100ms forwards;
}
@-webkit-keyframes sectitle0{
    0%{
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        transform: translateY(-100%);
    }
    33%{
        -webkit-transform: translateX(10%);
        transform: translateX(10%);
        transform: translateY(10%);
    }
    66%{
        -webkit-transform: translateX(-10%);
        transform: translateX(-10%);
        transform: translateY(-10%);
    }
    100%{
        -webkit-transform: translateX(0);
        transform: translateX(0);
        transform: translateY(10%);
    }
}
@keyframes sectitle0{
    0%{
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    33%{
        -webkit-transform: translateX(10%);
        transform: translateX(10%);
    }
    66%{
        -webkit-transform: translateX(-10%);
        transform: translateX(-10%);
    }
    100%{
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes sec0{
    0%{
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100%{
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes sec0{
    0%{
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100%{
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes card{
    0%{
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100%{
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes card{
    0%{
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100%{
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}